<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Select Menu</title>
    <link rel="stylesheet" href="combox_demo.css" />
</head>

<body translate="no">
    <h1>地区</span>
    </h1>

    <select id="year">
        <option value="hide">-- 省份 --</option>
        <option value="2010">北京</option>
        <option value="2011">上海</option>
        <option value="2012">广东</option>
        <option value="2013">福建</option>
        <option value="2014">贵州</option>
        <option value="2015">四川</option>
    </select>


    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script id="rendered-js">
        $('select').each(function() {
            var $this = $(this),
                numberOfOptions = $(this).children('option').length;

            $this.addClass('select-hidden');
            $this.wrap('<div class="select"></div>');
            $this.after('<div class="select-styled"></div>');

            var $styledSelect = $this.next('div.select-styled');
            $styledSelect.text($this.children('option').eq(0).text());

            var $list = $('<ul />', {
                'class': 'select-options'
            }).
            insertAfter($styledSelect);

            for (var i = 0; i < numberOfOptions; i++) {
                $('<li />', {
                    text: $this.children('option').eq(i).text(),
                    rel: $this.children('option').eq(i).val()
                }).
                appendTo($list);
            }

            var $listItems = $list.children('li');

            $styledSelect.click(function(e) {
                e.stopPropagation();
                $('div.select-styled.active').not(this).each(function() {
                    $(this).removeClass('active').next('ul.select-options').hide();
                });
                $(this).toggleClass('active').next('ul.select-options').toggle();
            });

            $listItems.click(function(e) {
                e.stopPropagation();
                $styledSelect.text($(this).text()).removeClass('active');
                $this.val($(this).attr('rel'));
                $list.hide();
                //console.log($this.val());
            });

            $(document).click(function() {
                $styledSelect.removeClass('active');
                $list.hide();
            });

        });
    </script>



</body>

</html>